<template>
  <view>
    <view class="top-bg"></view>
    <view class="box">
      <!-- 头像 -->
      <view class="head-box">
        <view class="avatar">
          <image class="head-img" src="https://pic.imgdb.cn/item/6490f5291ddac507cc5aa996.jpg"></image>
        </view>
        <view class="tip"></view>
      </view>
      <!-- 第一部分列表包括修改个人信息、查看我的订单和成为尊贵的VIP-->
      <view>
        <button class="row" style="width: 100%;" data-target="page2" @click="navigateToPage">
          <view class="left">
            <icon class="icon-small" type="success" size="16"></icon>
            <text class="text">修改个人信息</text>
          </view>
          <view class="right">》</view>
        </button>
        <button class="row" style="width: 100%;" data-target="page3" @click="navigateToPage">
          <view class="left">
            <icon class="icon-small" type="success" size="16"></icon>
            <text class="text">查看我的订单</text>
          </view>
          <view class="right">》</view>
        </button>
        <button class="row" style="width: 100%;border-bottom: none;" data-target="page5" @click="navigateToPage">
          <view class="left">
            <icon class="icon-small" type="success" size="16"></icon>
            <text class="text">成为尊贵的VIP</text>
          </view>
          <view class="right">》</view>
        </button>
      </view>
    </view>
    <!-- 第二部分列表包括 详情须知和客服-->
    <view class="end">
      <button class="row" style="width: 100%;" data-target="page4" @click="navigateToPage">
        <view class="left">
          <icon class="icon-small" type="success" size="16"></icon>
          <text class="text">详情须知</text>
        </view>
        <view class="right">》</view>
      </button>
      <button class="row" style="width: 100%;border-bottom: none;" @click="confirm">
        <view class="left">
          <icon class="icon-small" type="success" size="16"></icon>
          <text class="text" >客服</text>
        </view>
        <view class="right">》</view>
      </button>
    </view>
    <!-- 第三部分列表 -->
    <view class="end1">
      <view class="left">
        <text class="text1" data-target="page1" @click="navigateToPage"> 退出登录 </text>
      </view>
    </view>
    <view class="footer">
      <text>关注我们~</text>
    </view>
    <!-- 点击客服设置的弹框 -->
          <view class="uniappDemo">
            <!-- 弹框内容 -->
            <view class="uniappBox">
              <view :hidden="!uniappShowModel" class="uniappContant">
                <view class="uniappTitle">提示</view>
                <view class="uniappNotice">请联系客服QQ:1008611</view>
                <!-- 确定取消按钮 -->
                <view class="uniappBtn">
                  <view @tap="confirm2()">确定</view>
                </view>
              </view>
              <!-- 背景黑色蒙版 -->
              <view class="uniappBgdCol" :hidden="!uniappShowModel" @tap="uniappShowModel = false"></view>
            </view>
          </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        uniappShowModel: false, //默认不显示
      };
    },
    onLoad(option) {},
    methods: {
      //提交
      confirm() {
        this.uniappShowModel=true
      },
      
      // 点击确定按钮模态框消失
      confirm2() {
        this.uniappShowModel = false
    },
      navigateToPage: function(event) {
        const target = event.currentTarget.dataset.target;
        if (target === 'page1') {
          uni.navigateTo({
            url: '/pages/Login/L-Users/L-Users'
          });
        } else if (target === 'page2') {
          uni.navigateTo({
            url: '/pages/Users/U-Info/Info'
          });
        } else if (target === 'page3') {
          uni.navigateTo({
            url: '/pages/Users/U-Orders/Orders'
          });
        } else if (target === 'page4') {
          uni.navigateTo({
            url: '/pages/Users/U-Details/Details'
          });
        } else if (target === 'page5') {
          uni.navigateTo({
            url: '/pages/Users/U-VIP/VIP'
          });
        }
      },
      // 基本信息
      basicClick() {
        console.log('基本信息监听');
      },

      /**
       * 生命周期函数--监听页面加载
       */
      onLoad(options) {

      },

      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady() {

      },

      /**
       * 生命周期函数--监听页面显示
       */
      onShow() {

      },

      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide() {

      },

      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload() {

      },

      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh() {

      },

      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom() {

      },

      /**
       * 用户点击右上角分享
       */
      onShareAppMessage() {

      }
    },
    }
</script>
<style>
  page {
    background-color: #f1f1f1;
  }

  /* 设置背景颜色 */
  .top-bg {
    height: 260rpx;
    background-color: #7bc0eeec;
  }

  /* 圆角盒子 */
  .box {
    background-color: white;
    margin-top: -120rpx;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    padding: 0 20rpx;
  }

  /* 头像部分 */
  .head-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1rpx solid #fbdbdc;
    padding-bottom: 20rpx;
  }

  .avatar {
    margin-top: -80rpx;
    font-weight: inherit;
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
  }

/* 头像的css */
  .head-img {
    width: 140rpx;
    height: 140rpx;
    overflow: hidden;
    border-radius: 55%;
    background-color: #fbdbdc;
  }

  .tip {
    font-size: 26rpx;
    color: gray;
    margin: 15rpx 0;
  }

  /* 列表部分 */
  .row {
    display: flex;
    align-items: center;
    padding: 36rpx 10rpx;
    font-size: 30rpx;
    font-weight: inherit;
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1rpx solid #fbdbdc;
  }

  .row::after {
    border: none;
  }

  .text {
    margin-left: 15rpx;
    color: #636262;
  }

  .left {
    width: 90%;
    text-align: left;
    display: flex;
    align-items: center;
  }

  .right {
    width: 10%;
    text-align: right;
    color: rgb(148, 147, 147);
  }

  .end {
    background-color: white;
    margin-top: 20rpx;
    padding: 0 20rpx;
  }

  .end1 {
    background-color: rgba(10, 198, 245, 0.836);
    margin-top: 20rpx;
    padding: 0 20rpx;
    height: 50px;
  }

  .text1 {
    margin-left: 260rpx;
    margin-top: 35rpx;
    color: #636262;
  }

  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 0;
    font-size: 22rpx;
    margin: 30rpx 0;
    color: gray;
  }
  	.uniappBgdCol {
  		position: fixed;
  		top: 0%;
  		left: 0%;
  		width: 100%;
  		height: 100%;
  		background-color: black;
  		z-index: 99;
  		-moz-opacity: 0.6;
  		opacity: .6;
  		filter: alpha(opacity=88);
  	}
  
  	.uniappContant {
  		position: fixed;
  		top: 36%;
  		left: 50%;
  		width: 80%;
  		margin-left: -40%;
  		background-color: white;
  		z-index: 100;
  		border-radius: 10rpx;
  	}
  
  	.uniappTitle {
  		display: flex;
  		justify-content: center;
  		font-size: 32rpx;
  		font-weight: bold;
  		color: #161303;
  		font-size: 28rpx;
  		padding: 20rpx 0rpx;
  		border-bottom: 2rpx solid #EEEEEE;
  		;
  	}
  
  	.uniappNotice {
  		font-size: 28rpx;
  		color: #121212;
  		display: flex;
  		justify-content: left;
  		padding: 40rpx;
  	}
  
  	.uniappBtn {
  		display: flex;
  		justify-content: space-between;
  	}
  
  	.uniappBtn view {
  		width: 100%;
  		display: flex;
  		justify-content: center;
  		align-items: center;
  		padding: 4% 0%;
  		font-size: 28rpx;
  	}
  
  	.uniappBtn view:first-child {
  		background-color: rgb(254, 250, 230);
  		border-radius: 0rpx 0rpx 0rpx 10rpx;
  	}
  
  	.uniappBtn view:last-child {
  		background-color: rgb(254, 209, 10);
  		border-radius: 0rpx 0rpx 10rpx 0rpx;
  	}
</style>